<template>
  <div class="full_box">
    <div class="avatar_region">
      <el-avatar :size="110" :src="circleUrl" class="to_center">{{ teacherName }}</el-avatar>
    </div>
    <div class="operating_menu">
      <div class="student_name">{{ teacherName }}</div>
      <el-button type="danger" size="mini" class="exit" @click="logout()">
        退出
      </el-button>
    </div>
  </div>
</template>

<script>
//测试数据
//import {testData} from "@/js/testConfig.mjs";

export default {
  name: "TeacherAsideHeader",
  data() {
    return {
      circleUrl:'@/assets/logo.png'
    }
  },
  computed:{
    teacherName:function (){
      return this.$store.state.teacher_studentData.teacherName
    },
  },
  methods: {
    logout() {
      window.sessionStorage.removeItem('token')
      this.$router.push('/')
    }
  },
}
</script>

<style scoped>
.full_box {
  background-color: #b2bec3;
}

.to_center {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.avatar_region {
  height: 80%;
}
.operating_menu{
  display: flex;
  justify-content: center;
  align-items: center;
}
.exit{
  margin-left: 20px;
}
.student_name{
  color: #eeeeee;
  size: 16px;
  font-family:'Avenir', Helvetica, Arial, sans-serif;
  font-weight: bolder;
}
</style>